<script type="text/javascript">

    $(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        var motfr = $('mot_fr');
        var moteng = $('mot_eng');
        var statut = $('statut');
        var id = $('id');
        var ligne;
        
        allFields = $( [] ).add( motfr ).add( moteng ).add( statut ),

        function checkLength( o, n, min, max ) {
            if ( o.val().length > max || o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                return false;
            } else {
                return true;
            }
        }
        
        /**
         * Remplace les caractères accentué de la chaine passée en parametre
         * par des caractères non accentué.
         */
        function no_accent(my_string) {
            var new_string = "";
            var pattern_accent = new Array("é", "è", "ê", "ë", "ç", "à", "â", "ä", "î", "ï", "ù", "ô", "ó", "ö");
            var pattern_replace_accent = new Array("e", "e", "e", "e", "c", "a", "a", "a", "i", "i", "u", "o", "o", "o");
            if (my_string && my_string!= "") {
                new_string = preg_replace(pattern_accent, pattern_replace_accent, my_string.toLowerCase());
            }
            return new_string;
        }
        /**
         * retourne la chaine passé en parametre en majuscule.
         */
        function makeUppercase(my_string) {
            return my_string.toUpperCase();
        }
        
        /**
         * Enleve les espaces de la chaine passee en paramètre
         */
        function trim(str) {
            return String(str).replace(/^\s*/,'').replace(/\s*$/,'');
        }


        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }

        $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            position : 'center',
            buttons: {
                "Modifier": function() {
                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );

                    //                    bValid = bValid && checkLength( motfr, "motfr", 0, 25 );
                    //                    bValid = bValid && checkLength( moteng, "moteng", 0, 25 );

                    //                    bValid = bValid && checkRegexp( motfr, /^([a-zA-Z])+$/, "Le mot français ne peut contenir que des lettres" );
                    //                    bValid = bValid && checkRegexp( moteng, /^([a-zA-Z])+$/, "Le mot anglais ne peut contenir que des lettres et aucun accents" );

                    if ( bValid ) {
                        var motfr = makeUppercase($('#motfr').val());
                        var moteng = makeUppercase($('#moteng').val());
                        var statut = 0 ;

                        if ( document.getElementById("statut0").checked ) {
                            statut = 0 ;
                        }
                        if ( document.getElementById("statut1").checked ) {
                            statut = 1 ;
                        }


                        
                        var id = $('#identifiant').val();
                        
                        $.ajax({
                            type: "post",
                            url: "modificationMot.php",
                            data: "id="+id+"statut="+statut+"fr="+motfr+"eng="+moteng,

                            cache: false,
                            success: function(){

                                
                               
                                ligne.find('td:eq(0)').text(id);
                                ligne.find('td:eq(1)').text(statut);
                                ligne.find('td:eq(2)').text(motfr);
                                ligne.find('td:eq(3)').text(moteng);
                                jSuccess('Mot modifi&eacute;')

                                $( this ).dialog( "close" );
                            }
                        });
                        $( this ).dialog( "close" );
                    }
                },
                Fermer: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

        $( "button.modifier_mot" )
        .button()
        .click(function() {
            
            //on recupere les valeurs de la ligne cliquée
            ligne = $(this).parent().parent();
            id = ligne.find('td:eq(0)').text();
            statut = ligne.find('td:eq(1)').text();
            var motfr = ligne.find('td:eq(2)').text();
            var moteng = ligne.find('td:eq(3)').text();
                       

                       
        
            $("#motfr").val(makeUppercase(trim(motfr)));
            $("#moteng").val(makeUppercase(trim(moteng)));
            $("#identifiant").val(trim(id));
    
            if(statut == 0){
                document.getElementById("statut0").checked = "true";
            }
    
            if(statut == 1){
                document.getElementById("statut1").checked = "true";
            }
    
    
            //document.modification.groupe[statut].checked = "true";
            //document.getElementById('statut'+statut).checked = 'checked'
      

            //$("#groupe"+statut).val(statut.checked=true);
            $( "#dialog-form" ).dialog( "open" );


            
            return false;
        });
    });
    

</script>


         

<form method="post" action="">
    <table border="1" >
        <thead>
            <tr>
                <th>ID</th>
                <th>STATUT</th>
                <th>FR</th>
                <th>ENG</th>
                <th>SUPPRIMER</th>
                <th>MODIFIER</th>
                <th>VALIDE/INVALIDE</th>

            </tr>
        </thead>
        <tbody id="tableau_consultation">
            <?php
            $oDAOMot = new DAOMot();
            $mot = new Mot();
            $tabMots = $oDAOMot->getAllMot();
            
           

            foreach ($tabMots as $key => $mot) {
            ?>
                <tr class="<?php echo $mot->getId() ?>">
                    <td>
                    <?php echo $mot->getId(); ?>
                </td>
                <td>
                    <?php echo $mot->getStatut(); ?>
                </td>
                <td>
                    <?php echo $mot->getFr(); ?>
                </td>
                <td>
                    <?php echo $mot->getEn(); ?>
                </td>
                <td>
                    <input type="button" name="supprimer" value="Supprimer" onclick="return supprimerMot(this)"/>
                </td>
                <td>
                    <button class="modifier_mot" name="<?php echo $mot->getId(); ?>">Modifier</button>
                </td>
                <td>
                    <?php
                    if($mot->getStatut() == 1){
                        echo("VALIDE");
                    }else{
                        echo("INVALIDE");
                    }
                            ?>
                </td>
            </tr>
            <?php
                }
            ?>
        </tbody>
    </table>
</form>

<div id="dialog-form" title="Modification du mot">
    <form method="post" action="#" id="modification" name="modification">
        <fieldset>
            <legend>Modification</legend>
            <label>ID :</label>
            <input type="text" name="identifiant" id="identifiant" disabled="disabled"/>
            <label>Mot fran&ccedil;ais :</label>
            <input type="text" name="mot_fr" id="motfr" class="text ui-widget-content ui-corner-all" value="" onkeypress="return valid_carac(event);"/>
            <label>Mot Anglais :</label>
            <input type="text" name="mot_eng" id="moteng" class="text ui-widget-content ui-corner-all" value="" onkeypress="return valid_carac(event);"/>
            <label>Statut :</label>
            <input type="radio" name="groupe" id="statut0" value="0" />0
            <input type="radio" name="groupe" id="statut1" value="1" />1
        </fieldset>
    </form>
</div>